<template>
  <el-row class="content"  :style="'height:' + fullHeight1 + 'px'">
  <el-container :style="'height:' + fullHeight1 + 'px'">
    <el-header  ref="elememt" style="height: 84px;">
      <img class="imglogo" src="./../../static/logo.png" alt="">
      <div class="wide">
        <div class="mid" v-for="(item,index) of tablist" :class="activeindex == index?'active':''" :key="index" @click="xuanze(index,item.name)">
          <p>{{item.title}}</p>
        </div>
      </div>
      <el-dropdown trigger="click" class="dropdown" @command="handleCommand">
            <span class="el-dropdown-link">
              <i class="el-icon-user" style="font-size:25px;margin-right:5px; position:relative; top:3px"></i>
              我的账号<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item >姓名：{{currentUserInfo.u_name}} </el-dropdown-item>
              <el-dropdown-item >身份：
                  <span v-if="currentUserInfo.u_status==0">超级管理员</span>
                  <span v-if="currentUserInfo.u_status==3">管理员</span>
                  <span v-if="currentUserInfo.u_status==4">设备管理员</span>
                  <span v-if="currentUserInfo.u_status==5">巡检管理员</span>
              </el-dropdown-item>
              <el-dropdown-item command="/editpass/editpassword">修改密码</el-dropdown-item>
            </el-dropdown-menu>
            
      </el-dropdown>
      <a class="logout" @click="logout" href="javascript:void(0)"><img src="./../../static/navigation-exit.png" alt="" style="margin-right:10px; position:relative; top:5px">退出</a>
    </el-header>
    <el-dialog
      title="修改密码"
      :visible.sync="editPasswordDialogVisible "
      width="50%"
      >
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="新密码" prop="pass" :rules="[{ required: true, message: '请输入新密码', trigger: 'blur'}]">
          <el-input type="password" v-model="ruleForm.pass"  show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass" >
          <el-input type="password" v-model="ruleForm.checkPass"   show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-main><component :is="current"></component></el-main>
  </el-container>
  </el-row>
</template>

<script>
  import Patrol from '../pages/patrol/index'
  import Repair from '../pages/repair/index'
  import Asset from '../pages/assetManagement/index'
  import BasicInfo from '../pages/basicInfo/index'
  import Authorization from '../pages/Authorization/index'
  import BaoBiao from './hulist/baobiao'
    export default {
        name: "home",
      components:{
        Patrol,
        Repair,
        Asset,
        BasicInfo,
        Authorization,
        BaoBiao
      },
      data() {
        var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
          return {
            current:'Patrol',
            nice:localStorage.getItem('type'),
            fullHeight1:document.documentElement.clientHeight,
            tablist:[
              {title:'巡检任务',name:'Patrol'},
              {title:'巡检结果',name:'Repair'},
              {title:'汇总报表',name:'BaoBiao'},
              {title:'资产管理',name:'Asset'},
              {title:'权限管理',name:'Authorization'}
            ],
            activeindex:0,
            editPasswordDialogVisible :false,
            ruleForm: {
                pass: '',
                checkPass: '',
            },
            rules: {
              pass: [
                { validator: validatePass, trigger: 'blur' }
              ],
              checkPass: [
                { validator: validatePass2, trigger: 'blur' }
              ],
              age: [
                { validator: checkAge, trigger: 'blur' }
              ]
            },
            currentUserInfo:{}
          }
      },
      created(){
          if(localStorage.getItem('userSatus') == 4){
            this.current = 'Asset'
            this.tablist = [ 
              {title:'资产管理',name:'Asset'},
              {title:'权限管理',name:'Authorization'}
              ];
          }else if(localStorage.getItem('userSatus') == 5){
            this.tablist = [ 
              {title:'巡检任务',name:'Patrol'},
              {title:'巡检结果',name:'Repair'},
              {title:'汇总报表',name:'BaoBiao'},
              {title:'权限管理',name:'Authorization'}
            ];
          }else{
            this.tablist = [
              {title:'巡检任务',name:'Patrol'},
              {title:'巡检结果',name:'Repair'},
              {title:'汇总报表',name:'BaoBiao'},
              {title:'资产管理',name:'Asset'},
              {title:'权限管理',name:'Authorization'}
            ]
          }
      },
      mounted() {
        let parem = {
          id:localStorage.getItem('uid')
        }
        this.ajaxCommon.ajax({
          url: 'searchuser',
          methods:'get',
          data: parem,
          success: (res) => {
            console.log('当前用户信息',res)
            this.currentUserInfo = res.data
          }
      });

      },
      methods:{
        submitForm(formName) {
          console.log(this.ruleForm)
          let info = {
            u_id:localStorage.getItem('uid'),
            u_pass: this.ruleForm.checkPass
          }
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.ajaxCommon.ajax({
                    url: 'ADMINuserupdate',
                    method: 'post',
                    data: info,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                            duration:'2000'
                          });
                          this.editPasswordDialogVisible  = false;
                          // this.huoqu();
                          setTimeout(()=>{this.logout() },3000) 
                          
                      }else{
                        this.$message({
                            message: res.status,
                            type: 'error',
                            duration:'2000'
                          });
                      }
                    }
                });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        handleCommand(command){
            if (command === '/editpass/editpassword') {
              this.editPasswordDialogVisible = true
            } 
        },
        xuanze(index,name){
          this.activeindex = index;
          this.current = name;
          this.backgro
        },

        logout(){
          localStorage.removeItem('userName');
          localStorage.removeItem('uid');
          localStorage.removeItem('userSatus');

          location.reload();
        }
      }
    }
</script>

<style scoped lang="less">
  .el-header {
    // background-color: #00BDAC;
    background:url("./../../static/navigation-background.png");
    position: relative;
    .imglogo {
      position: absolute;
      left: 23px;
      top: 22px;
      display: inline-block;
      width: 213px;
      height: 36px;
    }
    .wide {
      width: auto;
      height: 100%;
      margin:  0 auto;
      margin-left: 253px;
      .mid{
        float: left;
        margin: 0 20px;
        height: 70%;
        line-height: 84px;
        p {
          font-size: 18px;
          color: #E6E6E6;
          width: 100%;
          text-align: center;
          margin: 0;
          cursor: pointer;
        }
      }
      .active {
        
        background:url("./../../static/nav_background.png") no-repeat 0px 20px;
        position: relative;
        width: 124px;
        p{
          color: #00bdac;
          font-weight:600;
        }
      }
    }

    .logout{
      position: absolute;
      text-decoration: none;
      right: 100px;
      top:50%;
      transform: translateY(-50%);
      font-size: 16px;
      color: #fff;
      z-index: 10;
    }
    .dropdown{
      position: absolute;
      right: 200px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      color: #fff;
      z-index: 10;
    }
  }
  .el-main {
    padding: 0px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
</style>
